<template>
  <h2>我的{{stateCN[state?state:0]}}订单</h2>
  <br>
  <el-table :data="BookList" ref="bookTableRef" style="width: 100%" >
    <el-table-column type="expand" label="详情" width="60px">
      <template #default="props">
        <div style="padding-left: 40px; box-sizing: border-box">
          <BookDetails :book-i-d="props.row.bookID"></BookDetails>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="订单编号" width="400">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.bookID }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="实际付款" width="140">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.totalPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="下单时间" width="220">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="订单状态" width="120">
      <template #default="scope">
        <el-tag
            :type="stateTag[scope.row.status]"
            effect="dark"
            round
        >
          {{ stateCN[scope.row.status] }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="订单选项">
      <template #default="scope">
        <div v-if="scope.row.status === '1'">
          <el-popover effect="light" trigger="hover" placement="left">
            <template #default>
              <div>取消订单</div>
            </template>
            <template #reference>
              <el-button @click="cancelBook(scope.row.bookID)" size="small" type="danger" circle >×</el-button>
            </template>
          </el-popover>
          <el-popover effect="light" trigger="hover" placement="right">
            <template #default>
              <div>去付款</div>
            </template>
            <template #reference>
              <el-button @click="showPay(scope.row.bookID)" size="small" type="success" circle >￥</el-button>
            </template>
          </el-popover>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <PayBook :dialog-form-visible=dialogFormVisible :book-i-d="currentPayBook" @closeDialog="closeDialog" @paySuccess="paySuccess"></PayBook>
</template>

<script>
import request from "@/http/request";
import {ref} from "vue";
import PayBook from "@/components/dialog/PayBook";
import BookDetails from "@/components/descriptions/BookDetails";
const {useRoute} = require("vue-router");

export default {
  name: "BookList",
  components: {BookDetails, PayBook},
  watch: {
    '$route.fullPath'() {
      this.state = this.route.query.state;
      this.getBookList();
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      BookList: [],
      currentPayBook: '',
    }
  },
  methods: {
    getBookList() {
      request({
        url: "/book/getBook",
        method: "get",
        params:{
          status: this.state,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.BookList = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    cancelBook(bookID) {
      request({
        url: "/book/cancelBook",
        method: "post",
        data:{
          bookID: bookID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.$tipUtil.successTip(response.msg);
          this.getBookList();
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    showPay(bookID) {
      this.dialogFormVisible = true;
      this.currentPayBook = bookID;
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    paySuccess() {
      this.BookList = [];
      this.getBookList();
    },
  },
  setup() {
    const route = useRoute();
    const state = ref(route.query.state);
    const stateCN = ['全部', '待付款', '已付款'];
    const stateTag = ['danger', 'info', '', 'warning', 'success'];
    return {
      route,
      state,
      stateCN,
      stateTag,
    }
  },
  mounted() {
    this.getBookList();
  }
}
</script>

<style scoped>

</style>